﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>configInterface</title>
    <link rel="stylesheet" type="text/css" href="../themes/bootstrap/easyui.css">
    <link rel="stylesheet" type="text/css" href="../themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../css/common.css">
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../js/easyui-lang-zh_CN.js"></script>
</head>
<body>
    <table id="dg" style="width: 700px; height: 500px;"></table>
    <div id="toolbar" style="padding: 2px 5px">
        <a href="#" class="easyui-linkbutton cls-add" iconcls="icon-add"> 新增</a>
        <a href="#" class="easyui-linkbutton cls-edit" iconcls="icon-edit"> 编辑</a>
        <a href="#" class="easyui-linkbutton cls-remove" iconcls="icon-remove">删除</a>
        系统名称：<select class="easyui-combobox cls-search-sysName" panelheight="auto" style="width: 100px"></select>
        接口名称: <input class="easyui-textbox cls-search-name" type="text" name="name" />
        <a href="#" class="easyui-linkbutton cls-search" iconcls="icon-search">Search</a>
    </div>
    <div id="win" class="easyui-window" title="接口信息" data-options="modal:true,closed: true" style="width: 500px; height: 200px; padding: 10px;">
        <form id="form" class="easyui-form" method="post" data-options="novalidate:true">
            <div style="margin-bottom: 20px">
                <input type="hidden" name="id" />
                <select class="easyui-combobox cls-search-sysName" name="sysId" label="系统名称" style="width: 100%" data-options="required:true"></select>
            </div>
            <div style="margin-bottom: 20px">
                <input class="easyui-textbox" name="name" label="接口名称" style="width: 100%" data-options="required:true">
            </div>
            <div style="margin-bottom: 20px">
                <input class="easyui-textbox" name="interfaceUrl" label="接口地址" style="width: 100%" data-options="required:true">
            </div>
            <div style="margin-bottom: 20px">
                <select class="easyui-combobox" name="requestMethod" label="请求方法" style="width: 100%" data-options="required:true">
                    <option value="GET">GET</option>
                    <option value="POST">POST</option>
                    <option value="PUT">PUT</option>
                    <option value="DELETE">DELETE</option>
                </select>
            </div>
            <div style="margin-bottom:20px">
                <input multiline="true" class="easyui-textbox" name="desc" label="描述" style="width: 100%;height:60px" data-options="required:true">
            </div>
        </form>
        <div style="text-align:center;padding:5px 0">
            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()" style="width:80px">保存</a>
        </div>
    </div>
    <script type="text/javascript">
        $(function () {
            $('.cls-search-sysName').combobox({
                url: '../configSystem?current=1&size=100',
                method: 'GET',
                valueField: 'id',
                textField: 'name',
                loadFilter: function (rsp) {
                    if (rsp != null && rsp.success == true) {
                        return rsp.data.records;
                    } else {
                        return null;
                    }
                }
            });

            var $table = $("#dg");
            var queryParams = {
                "size": function () {
                    return $table.datagrid("getPager").pagination("options").pageSize;
                },
                "current": function () {
                    return $table.datagrid("getPager").pagination("options").pageNumber;
                },
                "condition[name]": function () {
                    return $(".cls-search-name").val();
                },
                "condition[sys_id]": function () {
                    return $('.cls-search-sysName').combobox('getValue');
                }
            };
            //表格绑定
            var dg = $table.datagrid({
                url: '../configInterface',
                method: 'GET',
                toolbar: '#toolbar',
                fit: true,
                pagination: true,
                pagePosition: 'bottom',
                pageNumber: 1,
                pageSize: 20,
                pageList: [20, 30, 40, 50, 100, 200, 500],
                remoteFilter: true,
                rownumbers: true,
                fitColumns: true,
                autoRowHeight: true,
                singleSelect: true,
                checkOnSelect: true,
                selectOnCheck: true,
                loadMsg: 'loading......',
                loadFilter: function (rsp) { //格式化返回数据
                    if (rsp != null && rsp.success == true) {
                        return {
                            "total": rsp.data.total,
                            "rows": rsp.data.records
                        };
                    } else
                        return {
                            "total": 0,
                            "rows": []
                        };
                },
                columns: [
                    [
                        { field: 'id', title: 'id', sortable: false, align: 'center', halign: 'center', width: 100, hidden: true },
                        { field: 'sysId', title: 'sysId', sortable: false, align: 'center', halign: 'center', width: 100, hidden: true },
                        { field: 'ck', checkbox: true },
                        { field: 'sysName', title: '系统名称', sortable: false, align: 'center', halign: 'center', width: 100 },
                        { field: 'sysDesc', title: '系统描述', sortable: false, align: 'center', halign: 'center', width: 100 },
                        { field: 'name', title: '接口名称', sortable: false, align: 'center', halign: 'center', width: 100 },
                        { field: 'interfaceUrl', title: '接口地址', sortable: false, align: 'center', halign: 'center', width: 100 },
                        { field: 'requestMethod', title: '请求方法', sortable: false, align: 'center', halign: 'center', width: 100 },
                        { field: 'desc', title: '描述', sortable: false, align: 'center', halign: 'center', width: 100 }
                    ]
                ],
                queryParams: queryParams
            });

            //查询按钮
            $(".cls-search").click(function () {
                $table.datagrid('reload', queryParams);
            });
            //添加按钮
            $(".cls-add").click(function () {
                $('#form').form('clear');
                $('#win').window({
                    title: '新增接口',
                    width: 600,
                    height: 400,
                    modal: true,
                    closable: true,
                    minimizable: false,
                    maximizable: false,
                    border: true
                });
                $('#win').window('open');
            });
            //编辑按钮
            $(".cls-edit").click(function () {
                var selectedItem = $("#dg").datagrid('getSelected');
                if (selectedItem != null) {
                    $('#form').form('clear');
                    $.ajax({
                        url: '../configInterface/' + selectedItem.id,
                        type: 'GET',
                        contentType: 'application/json;charset=UTF-8',
                        success: function (rsp) {
                            if (rsp != null && rsp.success == true) {
                                $('#form').form('load', rsp.data);
                            }
                        },
                        error: function (ex) {
                            alert("报错了");
                        }
                    });
                    $('#win').window({
                        title: '修改接口',
                        width: 600,
                        height: 400,
                        modal: true,
                        closable: true,
                        minimizable: false,
                        maximizable: false,
                        border: true
                    });
                    $('#win').window('open');
                }
            });
        });
        //提交表单
        function submitForm() {
            $('#form').form('submit', {
                url: '../configInterface/addOrUpdate',
                onSubmit: function () {
                    return $(this).form('enableValidation').form('validate');
                },
                success: function (data) {
                    var rsp = eval('(' + data + ')');
                    if (rsp != null && rsp.success == true) {
                        $('#win').window('close');
                        $("#dg").datagrid('reload');
                    } else {
                        var errorMsg = '操作失败';
                        if (rsp != null && rsp.message != null && rsp.message != '') {
                            errorMsg = rsp.message;
                        }
                        $.messager.alert('错误信息', errorMsg, 'error');
                    }
                }
            });
        }
    </script>
</body>
</html>